import React from 'react'
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";

// App.jsx组件样式
import styles from './css/app.scss'

// react组件
import { Layout, Menu} from 'antd';
const { Header, Content, Footer } = Layout;

import Home from "./components/home/Home.jsx";
import Movie from "./components/movie/Movie.jsx";
import About from "./components/about/About.jsx";

export default class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {}
  }
  
  render(){
    return <Router>
      <Layout className="layout" style={{height:'100%'}}>
        {/*头部*/}
        <Header>
          <div className={styles.logo} />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={window.location.pathname.split('/')[1]}>
            <Menu.Item key="home"><Link to="/home">首页</Link></Menu.Item>
            <Menu.Item key="movie"><Link to="/">电影</Link></Menu.Item>
            <Menu.Item key="about"><Link to="/about">关于</Link></Menu.Item>
          </Menu>
        </Header>
        
        {/*内容*/}
        <Content>
          <div className={styles.siteLayoutContent}>
            <Switch>
              <Route path="/home" component={Home}></Route>
              <Route path="/" component={Movie}></Route>
              <Route path="/about" component={About}></Route>
            </Switch>
          </div>
        </Content>
        
        {/*底部*/}
        <Footer style={{ textAlign: 'center' }}>传智播客 ©2017 黑马程序员</Footer>
      </Layout>
    </Router>
  }
}
